<template>
  <div class="about">
    <!-- <h1>{{counter}}</h1> -->
    <!-- <h1>翻倍{{this.$store.state.counter * 2}}</h1> -->
    <!-- <h1>翻倍{{this.$store.getters.mul}}</h1> -->
    <!-- <h1>{{this.$store.state.counter}}</h1> -->
    <h1>翻倍{{mul}}</h1>
    <h1>{{counter}}</h1>
    <button @click="add">++</button>
    <button @click="decr">--</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // counter: 0
      }
    },
    computed: {
      counter() {
        return this.$store.state.counter
      },
      mul() {
        return this.$store.getters.mul
      }
    },
    methods: {
      add() {
        // this.counter++;
        // this.$store.state.counter++;
        // this.$store.dispatch('jiaA')
        this.$store.commit('jiaM');
      },
      decr() {
        /*
          参数1:actions中的方法名
          参数2:普通参数

        */
        this.$store.dispatch('jianA', 2)
      }
    }
  }
</script>
